<template>
  <div class="norm-wrap" v-loading="loading">
    <el-row>
      <el-col :span="8">
        <div class="first-left border-right model-wrap">
          <div class="norm-title-wrap">
            <img src="@/assets/images/icon_data1.png" class="icon-img" />
            <p class="norm-title" style="color: #352a4d">年度监测计划</p>
          </div>
          <div class="content-wrap">
            <div class="first-item">
              <p class="f-title"
                >监测年
                <el-tooltip placement="top" content="监测年为当前年">
                  <CIcon class="des-icon" type="c-xian-shuoming"></CIcon> </el-tooltip
              ></p>
              <p class="f-des">{{ currentYear }}<span class="unit">年</span></p>
            </div>
            <div class="first-item">
              <p class="f-title">已制定</p>
              <p
                class="f-des"
                :class="hasBtnPermission('ECI_MONITORING_PLAN_VIEW') ? 'g-cur-poi' : ''"
                @click="
                  handleRouter(
                    `/emissionInventory?applicableYear=${currentYear}`,
                    'ECI_MONITORING_PLAN_VIEW'
                  )
                "
                >{{ inventoryIndicator?.releaseNum || 0 }}</p
              >
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="first-left model-wrap">
          <div class="norm-title-wrap">
            <img src="@/assets/images/icon_data2.png" class="icon-img" />
            <p class="norm-title" style="color: #753e20">月度填报任务</p>
          </div>
          <div class="content-wrap">
            <div class="first-item">
              <p class="f-title"
                >填报月
                <el-tooltip placement="top" content="填报月为上一月">
                  <CIcon class="des-icon" type="c-xian-shuoming"></CIcon> </el-tooltip
              ></p>
              <p class="f-des month-wrap">{{ currentMonth() }}<span class="unit">月</span></p>
            </div>
            <div class="first-item">
              <p class="f-title">待填报</p>
              <p
                class="f-des"
                :class="hasBtnPermission('ECI_FILL_TASK_DATA_VIEW') ? 'g-cur-poi' : ''"
                @click="
                  handleRouter(
                    '/dataManagement/fillInTask?status=WAIT_FILL',
                    'ECI_FILL_TASK_DATA_VIEW'
                  )
                "
                >{{ inventoryIndicator?.waitFillNum || 0 }}</p
              >
            </div>
            <div class="first-item">
              <p class="f-title">待审核</p>
              <p
                class="f-des"
                :class="hasBtnPermission('ECI_FILL_TASK_DATA_VIEW') ? 'g-cur-poi' : ''"
                @click="
                  handleRouter(
                    '/dataManagement/fillInTask?status=WAIT_AUDIT',
                    'ECI_FILL_TASK_DATA_VIEW'
                  )
                "
                >{{ inventoryIndicator?.waitAuditNum || 0 }}</p
              >
            </div>
            <div class="first-item">
              <p class="f-title">已审核</p>
              <p
                class="f-des"
                :class="hasBtnPermission('ECI_FILL_TASK_DATA_VIEW') ? 'g-cur-poi' : ''"
                @click="
                  handleRouter('/dataManagement/fillInTask?status=PASS', 'ECI_FILL_TASK_DATA_VIEW')
                "
                >{{ inventoryIndicator?.passNum || 0 }}</p
              >
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="first-left model-wrap border-top border-right" style="height: 132px">
          <div class="norm-title-wrap">
            <img src="@/assets/images/icon_data3.png" class="icon-img" />
            <p class="norm-title" style="color: #244573">碳足迹模型</p>
          </div>
          <div class="content-wrap">
            <div class="first-item">
              <p class="f-title">已创建 </p>
              <p
                class="f-des"
                :class="hasBtnPermission('PCF_MODEL_VIEW') ? 'g-cur-poi' : ''"
                @click="handleRouter('/myModel/modelList', 'PCF_MODEL_VIEW')"
                >{{ footprintIndicator?.createNum || 0 }}</p
              >
            </div>
            <div class="first-item">
              <p class="f-title">已核算</p>
              <p
                class="f-des"
                :class="hasBtnPermission('PCF_MODEL_VIEW') ? 'g-cur-poi' : ''"
                @click="
                  handleRouter('/myModel/modelList?accountStatus=ACCOUNTED', 'PCF_MODEL_VIEW')
                "
                >{{ footprintIndicator?.calcNum || 0 }}</p
              >
            </div>
            <div class="first-item">
              <p class="f-title">生成报告</p>
              <p
                class="f-des"
                :class="hasBtnPermission('PCF_LCA_REPORT_VIEW') ? 'g-cur-poi' : ''"
                @click="handleRouter('/lcaReport', 'PCF_LCA_REPORT_VIEW')"
                >{{ footprintIndicator?.reportNum || 0 }}</p
              >
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="first-left border-top model-wrap" style="height: 132px">
          <div class="norm-title-wrap">
            <img src="@/assets/images/icon_data4.png" class="icon-img" />
            <p class="norm-title" style="color: #805d05">供应商数据集</p>
          </div>
          <div class="content-wrap">
            <div class="first-item">
              <p class="f-title">待提交 </p>
              <p
                class="f-des"
                :class="hasBtnPermission('PCF_SUPPLIER_DATA_QUERY') ? 'g-cur-poi' : ''"
                @click="handleRouter('/supplierData?status=UN_FEEDBACK', 'PCF_SUPPLIER_DATA_QUERY')"
                >{{ footprintIndicator?.unSubmitted || 0 }}</p
              >
            </div>
            <div class="first-item">
              <p class="f-title">待审核</p>
              <p
                class="f-des"
                :class="hasBtnPermission('PCF_SUPPLIER_DATA_QUERY') ? 'g-cur-poi' : ''"
                @click="handleRouter('/supplierData?status=AUDIT', 'PCF_SUPPLIER_DATA_QUERY')"
                >{{ footprintIndicator?.audit || 0 }}</p
              >
            </div>
            <div class="first-item">
              <p class="f-title">已通过</p>
              <p
                class="f-des"
                :class="hasBtnPermission('PCF_SUPPLIER_DATA_QUERY') ? 'g-cur-poi' : ''"
                @click="handleRouter('/supplierData?status=PASS', 'PCF_SUPPLIER_DATA_QUERY')"
                >{{ footprintIndicator?.pass || 0 }}</p
              >
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class=""></div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { hasBtnPermission } from '@/directives/btnPermission';
import { useRouter } from 'vue-router';
import { useNormBox } from './useNormBox';
const { loading, footprintIndicator, inventoryIndicator, currentYear, currentMonth } = useNormBox();

const router = useRouter();
function handleRouter(path: string, permissionCode?: string) {
  // 有code 没权限，拦截跳转
  if (permissionCode && !hasBtnPermission(permissionCode)) return;
  router.push(path);
}
</script>
<style lang="scss" scoped>
.norm-wrap {
  width: 100%;
  // height: 260px;
  background: #ffffff;
  border-radius: 0px 0px 6px 6px;
  border-top: 1px solid #f0f4f7;
  .norm-title-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .norm-title {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #753e20;
      line-height: 22px;
      margin-left: 4px;
    }
  }
  .first-left {
    height: 128px;
    padding: 18px 25px;

    .first-item {
      margin-top: 2px;
      text-align: left;
      width: 140px;
      .f-title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7a8a99;
        line-height: 22px;
      }
      .f-des {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #352a4d;
        line-height: 40px;
        .unit {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #0a1f33;
          line-height: 22px;
        }
      }
    }
  }
  .model-wrap:hover {
    background: #f8fbfc;
    box-shadow: 0px 12px 48px 16px rgba(64, 83, 122, 0.03), 0px 9px 28px 0px rgba(64, 83, 122, 0.05),
      0px 6px 16px -8px rgba(64, 83, 122, 0.08);
    border-radius: 0px 0px 0px 6px;
    // border-top: 1px solid #f0f4f7;
    // border-right: 1px solid #f0f4f7;
  }
  .border-right {
    border-right: 1px solid #f0f4f7;
  }
  .border-top {
    border-top: 1px solid #f0f4f7;
  }
  .first-right {
    height: 128px;
  }
  .content-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
  }
}
.icon-img {
  width: 16px;
  height: 16px;
}
.month-wrap {
  color: #753e20 !important;
  .unit {
    color: #753e20 !important;
  }
}
.des-icon {
  cursor: pointer;
}
</style>
